<template>
  <div class="bulletin">
    <el-form label-width="130px" @submit.native.prevent="Edit(id)">
      <el-form-item label="分馆名称">
        <el-input v-model="info.name" placeholder="分馆名称" />
      </el-form-item>
      <el-form-item label="分馆图片">
        <Single-image v-model="info.image"/>
      </el-form-item>
      <el-form-item label="引入地图" style="width:500px">
        <el-input v-model="mainForm.address" placeholder="请选择地址" readonly>
          <el-button slot="append" icon="el-icon-location" @click="openMap()"/>
        </el-input>
        <Map ref="ms" @on-select="selectAddress" />
      </el-form-item>
      <el-form-item label="开馆时间">
        <el-input v-model="info.business_hours" placeholder="开馆时间" />
      </el-form-item>
      <el-form-item label="分馆地址">
        <el-input v-model="info.address" placeholder="分馆地址" />
      </el-form-item>
      <!-- <el-form-item label="发布时间">
        <el-date-picker v-model="info.created_at" type="datetime" placeholder="选择发布时间" value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script src="https://map.qq.com/api/js?v=2.exp&key=L6NBZ-UY7YU-MX4V7-GHSQX-3HHSE-CHBIT&libraries=drawing,geometry,autocomplete,convertor"></script>
<script>
import SingleImage from '@/components/Upload/SingleImage'
import Tinymce from '@/components/Tinymce'
import Map from '@/components/Map/TenXun'
import { parseTime } from '@/utils/index'
export default {
  components: {
    Tinymce,
    SingleImage,
    Map
  },
  data() {
    return {
      id: this.$route.params.id,
      info: {},
      mainForm: {
        name: '',
        address: '',
        latitude: '',
        longitude: ''
      },
      created_at: parseTime(new Date().getTime())
    }
  },
  mounted() {
    this.GetInfoById(this.id)
  },
  methods: {
    // 打开地图弹窗
    openMap() {
      this.$refs.ms.show()
      // 根据省市区设置初始值
      this.$refs.ms.setLocationByAddress(
        this.mainForm.address
      )
      this.$refs.ms.setLocationByLatLng(
        this.mainForm.latitude,
        this.mainForm.longitude
      )
    },
    // 地址选择后的回调函数
    selectAddress(address, latitude, longitude) {
      this.mainForm.name = address
      this.mainForm.address = address
      this.mainForm.latitude = latitude
      this.mainForm.longitude = longitude
    },
    GetInfoById(id) {
      this.$http.get('branches/' + id).then(response => {
        console.log(response)
        this.info = response.resource.info
        this.mainForm = this.info.mapfmt
      })
    },
    Edit(id) {
      const params = {
        name: this.info.name,
        image: this.info.image,
        business_hours: this.info.business_hours,
        address: this.info.address,
        map: this.mainForm,
      }
      this.$http.patch('branches/' + id, params).then(response => {
        this.$success('操作成功')
        this.$router.push('/branches/list')
      })
    }
  }
}
</script>

<style>
.bulletin .el-progress-circle {
  background: #fff;
}
.avatar-uploader {
  position: relative;
}
.avatar-uploader .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  max-width: 500px;
  display: block;
}
</style>
